<template>
    <div class='detail-container'>
        <div class='shop-detail-nav'>
            <span class='fa fa-chevron-left' @click='goBackClick'></span>
            <span>商家详情</span>
        </div>
        <div class='detail-content'>
            <section>
                <h3>活动与属性</h3>
                <div class='act-attr'>
                    <p v-for='item in shopDetailMsg.activities'>
                        <span :style='"background-color:#"+item.icon_color'>{{item.icon_name}}</span>
                        <span></span>{{item.description}}
                    </p>
                    <p v-for='item in shopDetailMsg.supports'>
                        <span :style='"background-color:#"+item.icon_color'>{{item.icon_name}}</span>
                        <span></span>{{item.description}}
                    </p>
                </div>
            </section>
            <section class='shop-scenery'>
                <h3>商家实景</h3>
                <p>
                    <a v-for='p in shopDetailMsg.albums'>
                        <img  :src="p.cover_image_hash|imgFormat" >
                        <span>{{p.name}}(1)张</span>
                    </a> 
                </p>
            </section>
            <section class='business-msg'>
                <h3>商家信息</h3>
                <div>
                    <p style='font-size: 14px'>{{shopDetailMsg.description}}</p>
                    <p style='font-size: 14px'>地址：{{shopDetailMsg.address}}</p>
                    <!--<p>营业时间：{{shopDetailMsg.opening_hours[0]}}</p>-->
                    <p style='font-size: 14px'>营业执照：
                        <!--{{shopDetailMsg.license.business_license_image}}-->
                        <span class='fa fa-chevron-right icon'></span>
                    </p>
                    <p style='font-size: 14px'>餐饮服务许可证：{{shopDetailMsg.catering_service_license_image}}</p>
                </div>
            </section>
        </div>
        <footer></footer>
    </div>
</template>
<script>
    import bus from '../util/bus.js'
    export default{
        data:function(){
            return {
                shopDetailMsg : {},
            }
        },
        mounted:function(){
            this.reqShopHeader()
        },
        methods:{
            goBackClick:function(){
                window.history.go(-1)
            },
             // 请求商店头信息
            reqShopHeader:function(){
                this.$axios.get('ele/shopping/restaurant/'+this.$route.params.id,{
                    params:{
                        "extras":["activities","albums","license","identification"],
                        latitude:bus.latitude,
                        longitude:bus.longitude,
                    }    
                })
                .then(res=>{
                    this.shopDetailMsg = res.data
                })
            },
        }
    }
</script>
<style scoped>
    .detail-container{
        width: 100%;
        height: 100vh;
        background-color: #eee;
    }
    .shop-detail-nav{
        width: 100%;
        background-color: #2395ff;
        color: #fff;
        font-size: 2rem;
        font-weight: 400;
    }    
    .shop-detail-nav span{
        padding: 1.2rem;
    }
    .detail-content {
        height: calc(100vh - 50px);
        overflow: scroll;
    }
    .detail-content section{
        background-color: #fff;
        color: #333;
    }
    section h3,section p{
        margin-bottom: 0;
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
        font-weight: 400;
        font-size: 1.4rem;
    }
    section p{
        font-size: 1rem;
        padding: 12px 20px;
    }
    section p span:nth-of-type(1){
        font-size: .2rem;
        color: rgb(255, 255, 255); 
    }
    .shop-scenery p{
        text-align: center;
    }
    .shop-scenery img{
        width: 100px;
        height: 80px;
        padding:5px;
    }
    .shop-scenery p a span{
        position: relative;
        top: -10px;
        left: -80px;
    }
    /*商家信息*/
    .icon{
        color: #eee;
        font-size: 24px;
    }
    /*footer*/
    footer{
        width: 100%;
        height: 52px;
        background-color: #fff;
        position: fixed;
        bottom: 0;
        z-index: 10;
        margin-top: 10px;
    }
</style>